<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
    </script>
    <style>
    #panel{
        border: 1px solid black; width:300px;
        position: absolute;/*必须添加animate才可移动*/
        left: 100px;
        top: 400px;
    }
    #panel .head{
        background-color: aqua;
        height: 30px;
        padding: 10px;
        cursor: pointer;
        

    }
    #panel .content{
        border-top: 100px;
        height: 50px;
        display: none;
        padding: 10px;
    }
    #bg{border: 1px solid black; width: 300px; position: absolute; left: 600px;}
    #bg textarea{width: 280px; height: 80px; overflow: hidden; margin: 10px;}
    </style>
</head>
<body>
    <div id="panel">
        <h4 class="head">折叠菜单</h4>
        <div class="content">菜单内容</div>
    </div>
    <div id="bg">
        <input type="button" value="放大">
        <input type="button" value="缩小">

        <textarea>
            四川信息职业技术学院是经四川省人民政府批准、教育部备案的全省唯一一所电子信息类公办高等职业院校，始建于1976年，隶属于四川省经济和信息化厅，是四川省示范性高职院校、省优质高职院校建设培育单位、国家高技能人才培训基地、全国“职业院校数字校园建设实验校”、四川省教育信息化试点单位。

        </textarea>
    </div>
    <script>
        $(function(){
            $("[value='放大']").click(function(){
                if(!$("textarea").is(":animated")){//判断是否在执行动画
                if($("textarea").height()<250){
                    $("textarea").animate({"height":"+=50px"},500);
                }
                }
            });

            $("[value='缩小']").click(function(){
                if($("textarea").height()>80){
                    $("textarea").animate({"height":"-=50px"},500);
                }                  
            });
        });
            $(".head").click(function(){
             //   $(".content").toggle(5000);//实现隐藏和动画展开效果
           // $(".content").slideDown("slow");//只能展示下拉效果
           //  $(".content").fadeIn(4000);//框框展示，内容动画缓慢展示
            $("#panel").animate({"left":"+=500px","top":"300px"},3000,function(){// 必须添加position: absolute;才可移动 animate累加累减动画
            $(".content").fadeIn(4000);//文字缓慢显示
            });
            });
            $("#panel").click(function(){
                $(this).animate({
                    "left":"400px",
                    "height":"200px",
                    opacity:"0.7"},300)
                    .animate({top:"200px",width:"200px"},3000,function(){
                        $(this).css("border","10px solid red")
                    })
            })
        // });
    </script>
</body>
</html>